


var btn = document.getElementsByClassName('btn')[0]
btn.onclick=function(){
    location.href='./search.html'
}
var log = document.getElementsByClassName('log')[0]
var reg = document.getElementsByClassName('reg')[0]
var lgc = getCookie('lgc')
if (lgc) {
    log.innerHTML = lgc
    reg.innerHTML = '退出登录'
    reg.onclick = function () {
        delCookie('lgc')
        log.innerHTML = `<a href="./login.html?ReturnUrl=./details.html">请登录</a>`
        reg.innerHTML = `<a href="./register.html">注册有礼</a>`
    }
}


var url = urlParamsParse()
var goodInfo = url.goodInfo
if (!goodInfo) {
    location.href = "./index.html"  // 滚到主页面
}

var magnifier = document.getElementsByClassName("magnifier")[0]
var itemInfo = document.getElementsByClassName("item-info")[0]
searchGoodsByGoodsId({ gid: goodInfo }).then(res => {
    var { status, message, data } = res
    if (status) {
        var { goodsName, goodsPrice, goodsImg, smallPicList, bigPicList } = data
        var listHTML = ""
        smallPicList.slice(0, 5).forEach((img) => {
            listHTML += `<li class="list-item"><img src="${img}" alt=""></li>`
        })
        var magnifierHTML = `
    <div class="magnifier-preview">
        <img class="smallImg" src="${goodsImg}" alt="">
        <div class="shadow"></div>
    </div>

    <div class="magnifier-list">
        <ul class="list">
            ${listHTML}
        </ul>
    </div>

    <div class="magnifier-scale">
        <img src="${bigPicList[0]}" alt="" class="bigImg">
    </div>`

        magnifier.innerHTML = magnifierHTML
        var infoHTML = `

    <h2>${goodsName}</h2>

    <div class="time-info">
        【气温骤降,寒潮来袭!限量抢购中!错过再等一年!】官方授权,全新正品,限购一台,企业采购开13%增值税专用发票【大促进行中】送运费险 闪电发货 品质保证 让您购物放心无忧! [减50+送耳机+送手表]12期分期+赠智能手表+蓝牙耳机+直播礼手持风扇+抽奖礼榨汁杯+咨询客服赠1年店铺延保 
        <a class="more" href="./index.html">更多好物一站购齐!爆款直降!猛戳></a>
    </div>

    <div class="price">
        <span class="ck">参 考 价:</span>
        <del class="ckprice">￥999999.00</del> <br>
        <span class="ck">实 际 价:</span>
        <span class="sjprice"> ￥ ${goodsPrice}</span>
        <span class="timeprice">83天内最低价哦</span>
        <span class="hy">加入会员,下单约返18.99元云钻<br>
        <a class="nowin" href="">立即加入</a></span>
        <img class="wt" src="https://image2.suning.cn/uimg/cms/img/162333095497275868.gif" alt="">
        <img class="ewm" src="https://code.suning.cn/img/1_F647E3AC66E224B27231BEA2BAEC556E.jpg?bizCode=k72jFN" alt="">
    </div>
        
    <div class="buy">
        <span class="bynum">数 量</span>
            <span class="reduce">-</span>
            <input type="number" value="1" class="buyNum">
            <span class="add">+</span>
            <span class="buyinfo">根据实际服务场景的不同,服务过程中可能会用到材料,服务人员会提前告知材料收费标准,经同意后使用,所用材料需收取相应费用。
            <a href="">服务详情</a></span>
    </div>

    <div class="addCar">
        <button class="buyNow">现在购买</button>
        <button class="addToShoppingCar">
            <i class="iconfont icon-gouwuche"></i>加入购物车</button>
    </div>`

        itemInfo.innerHTML = infoHTML

        var magnifierPreview = document.getElementsByClassName("magnifier-preview")[0]
        var shadow = document.getElementsByClassName("shadow")[0]
        var magnifierScale = document.getElementsByClassName("magnifier-scale")[0]
        var bigImg = document.getElementsByClassName("bigImg")[0]
        var smallImg = document.getElementsByClassName("smallImg")[0]
        var magnifierList = document.getElementsByClassName("magnifier-list")[0]
        var listItems = magnifierList.getElementsByClassName("list-item")
        console.log(listItems)
        var maxLeft = getVal(magnifierPreview, "width") - getVal(shadow, "width")
        var maxTop = getVal(magnifierPreview, "height") - getVal(shadow, "height")
        var scale = getVal(bigImg, "width") / getVal(smallImg, "width")
        Array.from(listItems).forEach(function (listItem, i) {
            listItem.onclick = function () {
                smallImg.src = smallPicList[i]
                bigImg.src = bigPicList[i]
            }
        })
        magnifierPreview.onmouseenter = function () {
            shadow.style.display = "block"
            magnifierScale.style.display = "block"
        }
        magnifierPreview.onmousemove = function (e) {
            var e = e || window.event
            var x = e.pageX - magnifier.offsetLeft - shadow.clientWidth / 2
            var y = e.pageY - magnifier.offsetTop - shadow.clientHeight / 2

            if (x < 0) x = 0
            if (x > maxLeft) x = maxLeft
            if (y < 0) y = 0
            if (y > maxTop) y = maxTop

            shadow.style.left = x + "px"
            shadow.style.top = y + "px"
            bigImg.style.left = -scale * x + "px"
            bigImg.style.top = -scale * y + "px"
        }

        magnifierPreview.onmouseleave = function () {
            shadow.style.display = "none"
            magnifierScale.style.display = "none"
        }

        var addToShoppingCarBtn = document.getElementsByClassName("addToShoppingCar")[0]
        var buyNumInp = document.getElementsByClassName("buyNum")[0]
        var reduce = document.getElementsByClassName("reduce")[0]
        var add = document.getElementsByClassName("add")[0]
        reduce.onclick = function () {
            var num = this.nextElementSibling.value
            if (num > 1) {
                this.nextElementSibling.value--
            }
        }
        add.onclick = function () {
            this.previousElementSibling.value++
        }
        addToShoppingCarBtn.onclick = function () {
            if (lgc) {
                var buyNum = buyNumInp.value
                addToShoppingCar({ user: lgc, gid: goodInfo, buyNum }).then(res => {
                    var { status, message } = res
                    if (status) {
                        if (confirm("加入成功,是否跳转购物车?")) {
                            location.href = "./shoppingCar.html"
                        } else {
                            alert(message)
                        }
                    }
                })
            } else {
                if (confirm('您还没有登录,是否去登录~')) { location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href) }
            }
        }
    } else {
        location.href = "./index.html"
    }
})

function getVal(ele, attr) {
    return parseFloat(getStyle(ele, attr))
}

function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(ele)[attr]
    } else {
        return ele.currentStyle[attr]
    }
}

